<template>
  <div class="flow-create-bg">
    <div class="flow-create-header">
      <van-icon name="arrow-left" class="back-icon" @click="$router.back()" />
      <span class="header-title">发起流程-角色会签</span>
      <van-icon name="apps-o" class="menu-icon" />
    </div>
    <div class="flow-create-tabs">
      <div
        :class="['tab-item', activeTab === 0 && 'active']"
        @click="activeTab = 0"
      >
        填写信息
      </div>
      <div
        :class="['tab-item', activeTab === 1 && 'active']"
        @click="activeTab = 1"
      >
        流程预测
      </div>
      <div
        class="tab-slider"
        :style="{ left: activeTab === 0 ? '0%' : '50%' }"
      ></div>
    </div>
    <div class="flow-create-content">
      <div v-if="activeTab === 0">
        <phoneForm
          v-show="activeTab === 0 && formList && formList.length"
          ref="PhoneForm"
          :formList.sync="formList"
          :formConf="formAttrs"
          @submit="onSubmitForm"
        >
        </phoneForm>
      </div>
      <div v-else>
        <flowPrediction :node="nodeData"></flowPrediction>
      </div>
    </div>
    <div class="flow-create-footer">
      <van-button
        block
        type="primary"
        class="submit-btn"
        icon="passed"
        @click="onSubmit"
        >提交</van-button
      >
      <!-- <van-button block class="save-btn" icon="records" @click="onSave"
        >暂存</van-button
      > -->
    </div>
  </div>
</template>

<script>
import { getFlowDetail, flowStart } from "@/api/api.js";
import FGPhoneForm from "../FGPhoneForm.vue";
import phoneForm from "../../components/formGenerator/formComponents/phoneForm.vue";
import flowPrediction from "./flowPrediction.vue";
import "../../components/common/initPhone";

export default {
  components: { FGPhoneForm, flowPrediction, phoneForm },
  name: "flowCreate",
  data() {
    return {
      activeTab: 0,
      flowDetail: null,
      formList: [],
      formData: {},
      nodeData: {},
      formAttrs: {},
      flowId: "",
    };
  },
  mounted() {
    this.fetchDetail();
  },
  // created() {
  //   this.fetchDetail();
  // },
  methods: {
    fetchDetail() {
      const id = this.$route.query.id;
      if (!id) return;
      getFlowDetail(id)
        .then((res) => {
          // console.log('res', JSON.stringify(res));
          if (res.data && (res.status === 0 || res.success)) {
            this.flowDetail = res.data.data;
            this.formList = JSON.parse(res.data.formData || "[]");
            this.nodeData = JSON.parse(res.data.nodeData || "{}");
            this.formAttrs = JSON.parse(res.data.formConfig || "{}");
            this.flowId = res.data.processDefId;
            console.log(this.nodeData);
          } else {
            this.$toast("获取流程详情失败");
          }
        })
        .catch((e) => {
          this.$toast("获取流程详情异常");
        });
    },
    onSubmit() {
      if (this.$refs.PhoneForm && this.$refs.PhoneForm.validateForm) {
        this.$refs.PhoneForm.validateForm((form, newValue) => {
          if (form) {
            console.log("校验表单", form, newValue);
            this.$toast("表单校验成功");
          } else {
            this.$toast("表单未填写完成!");
          }
        });
      }
    },
    onSubmitForm(subFormData) {
      console.log("submintFormData",JSON.stringify(subFormData));
      flowStart({ flowId: this.flowId, formData: subFormData }).then((res) => {
        console.log("发发发---->",JSON.stringify(res))
        if (res.status === 0) {
          this.$toast("提交成功");
        } else {
          this.$toast("提交失败");
        }
      });
    },
    onSave() {
      this.$toast("已暂存");
    },
    onFormChange(newFormList) {
      this.formList = newFormList;
    },
  },
  watch: {
    $route(to, from) {
      this.fetchDetail();
    },
  },
};
</script>

<style scoped>
.flow-create-bg {
  min-height: 100vh;
  background: #f6f8fa;
  display: flex;
  flex-direction: column;
  position: relative;
}
.flow-create-header {
  background: #1677ff;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 18px 0 12px 0;
  letter-spacing: 2px;
  position: relative;
}
.back-icon {
  position: absolute;
  left: 16px;
  font-size: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}
.menu-icon {
  position: absolute;
  right: 16px;
  font-size: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}
.header-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
}
.flow-create-tabs {
  display: flex;
  align-items: flex-end;
  background: #fff;
  height: 44px;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}
.tab-item {
  flex: 1;
  text-align: center;
  font-size: 17px;
  color: #555;
  padding: 10px 0 8px 0;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  z-index: 2;
}
.tab-item.active {
  color: #1677ff;
  font-weight: bold;
}
.tab-slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 3px;
  background: #1677ff;
  border-radius: 2px;
  transition: left 0.3s cubic-bezier(0.4, 2, 0.6, 1);
  z-index: 1;
}
.flow-create-content {
  flex: 1;
  background: #fafbfc;
  padding: 18px 0 0 0;
  min-height: 200px;
}
.form-row {
  background: #fff;
  padding: 18px 0 18px 18px;
  font-size: 16px;
  color: #222;
  border-bottom: 1px solid #f0f0f0;
}
.form-label {
  font-size: 16px;
  color: #222;
}
.preview-placeholder {
  color: #bbb;
  text-align: center;
  margin-top: 40px;
  font-size: 16px;
}
.flow-create-footer {
  display: flex;
  gap: 12px;
  padding: 18px 12px 18px 12px;
  background: transparent;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.submit-btn {
  flex: 2;
  font-size: 18px;
  font-weight: bold;
  background: #1677ff;
  border: none;
  border-radius: 12px;
  letter-spacing: 2px;
  height: 48px;
}
.save-btn {
  flex: 1;
  font-size: 18px;
  font-weight: bold;
  background: #fff;
  color: #1677ff;
  border: 1.5px solid #1677ff;
  border-radius: 12px;
  letter-spacing: 2px;
  height: 48px;
}
</style> 